<template>
	<div class="register">
		<div class="register-input w92 auto">
			<div class="input_com pt20 pb20 border-b flex flex-start">
				<span class="c333 bold">手机号</span>:
				<input v-model="form.phone" type="number" placeholder="请输入你的手机号" class="ml20 c999" >
			</div>
			<div class="input_com pt10 pb10 border-b layout">
				<div class="flex_1 flex">
					<span class="c333 bold">验证码</span>:
					<input v-model="form.code" class="ml20 coptcha-input c999"  placeholder="请输入验证码" maxlength="6" type="number">
				</div>
				<button class="coptcha radius red pl10 pr10 pt5 pb5 fs12" @click="getCaptchFun" style="border: 1px solid #ff0036;">
					<template v-if="sending">{{ minute }} s</template>
					<template v-else>获取验证码</template>
				</button>
			</div>
			<div class="input_com pt20 pb20 border-b flex flex-start">
				<span class="c333 bold">密码</span>:
				<input  v-model="form.password" placeholder="请输入新密码" type="password"  class="ml20 c999">
			</div>
			<button class="btn-button pt10 pb10 w100 full-width auto radius mt40" :class="{ on : boolean }" @click="submit">下一步</button>
			<p class="pt10 pb10 fs12">用户注册代表同意<router-link tag="span" :to="'/login/protocol?id=service'" class="red">《服务条款》</router-link>和<router-link tag="span" :to="'/login/protocol?id=privacy'" class="red">《隐私政策》</router-link></p>
        </div> 
        <p class="fs26rem c666 align-center" style="margin-top:85%">我已经有账号了,<router-link class="fs26rem c333" to="/login" style="text-decoration:underline">立即登录</router-link></p>
	</div>
</template>

<script>
import { getCode } from "@/api";
	export default{
		data()
		{
			return{
				sending         : false,
                minute          : 60,
                verify         	: false,
                form: {
					phone    : '',
					password : '',	
					code     : '',
                },
			}
		},
		computed:
		{
			boolean()
			{
				var boolean = false;
				this.verify = false;

				if( !this.form.phone || !this.form.password || !this.form.code )
				{
					this.verify = false;
					boolean = false;
				}
				else
				{
					this.verify = true;
					boolean = true;
				}

				return boolean;
			}
		},
		methods:
		{
			getCaptchFun () { 
				if(this.sending) return;

				getCode(this.form.phone).then( res => {
					this.countDown();
				})
							
			},
			submit(){ 
				if(!this.verify) return; 

    			this.$http.post('/register/signup', this.form ).then(res => {
    				this.$store.dispatch("login", res.data);
					this.$route.replace('/login/authentication')
    			})

			},
			countDown(){
				this.sending = true;

				var clear = setInterval( () => {
					if( this.minute > 0 ){
						--this.minute;
					}else{
						clearInterval(clear);
						this.sending = false;
						this.minute = 60;
					}
				}, 1000);
			}
		}
	}
</script>

<style lang="less">
	.register{
		.register-input{
			.input_com {
			height: 60px;
				span{
					width: 3rem;
					text-align-last: justify;
				}
			}
			.on{
				background-color:#ff0036;
				color: white;
			}
		}
	}
</style>